<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<label>
    姓名： <input type="text" />
</label>
<label>
    年龄： <input type="text" />
</label>
<label>
    性别： <input type="text" />
</label>
<button>添加</button>
<table border="1" class="stu_tab">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>操作</td>
    </tr>
</table>
<script>
    let students = [
        {name:"张三",age:18,sex:"男"},
        {name:"李四",age:18,sex:"女"},
        {name:"王五",age:18,sex:"男"}
    ]
    let tabDom = document.querySelector(".stu_tab")  // 找到table元素

    for (let i = 0; i<students.length;i++) {
        let trDom = document.createElement("tr") // 创建tr元素标签
        // 给创建的tr元素添加内容
        trDom.innerHTML = `
        <td>${students[i].name}</td>
        <td>${students[i].age}</td>
        <td>${students[i].sex}</td>
        <td>
            <button>删除</button>
            <button>编辑</button>
        </td>
    `
        tabDom.appendChild(trDom) // 把创建的tr元素追加到table元素中
    }
</script>
</body>
</html>